<template>
  <div class="login-wrap">
    <!-- -----------------------添加dialog------------------------------------------------------ -->
    <el-dialog title="添加用户" :visible.sync="dialog.addshow" width="30%">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="账号"
              :label-width="formLabelWidth"
              prop="userAcc"
            >
              <el-input v-model="addForm.userAcc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="headImg" hidden>
              <el-input v-model="addForm.userBy1" clearable></el-input>
            </el-form-item>
            <el-form-item label="输入密码" :label-width="formLabelWidth">
              <el-input
                v-model="addForm.userPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth">
              <el-input v-model="addForm.userBy2" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/uploadoss"
              name="file"
              :headers="upload.headerObj"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="addUser">提 交</el-button>
      </div>
    </el-dialog>

    <!--输入框-->
    <div class="form-wrapper">
      <div class="header">PettyLoan<br /><span @click="goEmp">巨森金融</span></div>
      <div class="input-wrapper">
        <div class="border-wrapper">
          <input
            type="text"
            v-model="login.userAcc"
            name="username"
            placeholder="请输入账号"
            class="border-item"
            autocomplete="off"
          />
        </div>
        <div class="border-wrapper">
          <input
            type="password"
            v-model="login.userPassword"
            name="password"
            placeholder="请输入密码"
            class="border-item"
            autocomplete="off"
          />
        </div>
      </div>
      <div class="action">
        <div class="btn" @click="loginDo">登录</div>
        <div class="btn" @click="registerDo">注册</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Login",
  data() {
    return {
      login: {},
      dialog: {
        addshow: false,
      },
      addForm: {},
      upload: {
        headerObj: "",
      },
      addForm:{},
      user:{},
      upload:{
        headerObj:""
      }
    };
  },
  methods: {
    goEmp(){
      this.$router.push("/EmpLogin");
    },
    loginDo() {
      // this.$axios.post("/loginDo", this.$qs.stringify(this.Login)).then((res) => {
      //   if (res.data.code == 200) {
      // sessionStorage.setItem(
      //   "menuList",
      //   JSON.stringify(res.data.data.menuList)
      // );
      // sessionStorage.setItem("authorization", res.data.data.token);

      this.$axios.post("/users/loginDo", this.login).then((response) => {

        if (response.data.code == 200) {
          this.$router.push("/index");
          // console.log(response.data.data.user);
          this.$store.commit('SET_USERINFO', response.data.data);
          this.$router.push("/index/?userName="+response.data.data.user.userName);
          sessionStorage.setItem("user",JSON.stringify(response.data.data.user));
        } else {
          this.$message.error("账号或密码有误，请检查后重新登录");
        }
      });

      //   } else {
      // console.log(res);
      // this.$message.error(res.data.message);
      //   }
      // });
    },
    registerDo() {
      this.dialog.addshow = true;
    },
    addUser() {
      this.$axios.post("/users/registerDo", this.addForm).then((response) => {
        if (response.data.code == 200) {
          this.$message.success(response.data.massage);
          this.dialog.addshow = false;
          this.addForm = {};
        } else {
          this.$message.error(response.data.message);
        }
      });
    },
  },
};
</script>
   
  <style scoped>
.login-wrap {
  height: 100%;
  font-family: JetBrains Mono Medium;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #0e92b3; */
  background: url("../assets/backimgone.jpg");
  background-size: 100% 100%;
}

.form-wrapper {
  width: 300px;
  background-color: rgba(41, 45, 62, 0.8);
  color: #fff;
  border-radius: 2px;
  padding: 50px;
}

.form-wrapper .header {
  text-align: center;
  font-size: 35px;
  text-transform: uppercase;
  line-height: 100px;
}

.form-wrapper .input-wrapper input {
  background-color: rgb(41, 45, 62);
  border: 0;
  width: 100%;
  text-align: center;
  font-size: 15px;
  color: #fff;
  outline: none;
}

.form-wrapper .input-wrapper input::placeholder {
  text-transform: uppercase;
}

.form-wrapper .input-wrapper .border-wrapper {
  background-image: linear-gradient(to right, #e8198b, #0eb4dd);
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-wrapper .input-wrapper .border-wrapper .border-item {
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  border-radius: 30px;
}

.form-wrapper .action {
  display: flex;
  justify-content: center;
}

.form-wrapper .action .btn {
  width: 60%;
  text-transform: uppercase;
  border: 2px solid #0e92b3;
  text-align: center;
  line-height: 50px;
  border-radius: 30px;
  cursor: pointer;
}

.form-wrapper .action .btn:hover {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.form-wrapper .icon-wrapper {
  text-align: center;
  width: 60%;
  margin: 0 auto;
  margin-top: 20px;
  border-top: 1px dashed rgb(146, 146, 146);
  padding: 20px;
}

.form-wrapper .icon-wrapper i {
  font-size: 20px;
  border: 1px solid #fff;
  padding: 5px;
  border-radius: 20px;
}

.form-wrapper .icon-wrapper i:hover {
  background-color: #0e92b3;
}
</style>